<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sass</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="/sass的使用/css/task.css">
</head>

<body>
    <!-- shift+！ 快速建立html文件 -->
    <!-- CSS的预编译工具 
        浏览器只能识别 html css js
        CSS 层叠样式表
        特点继承性 层叠性 优先性 
        前端市场中热门CSS预编译工具
            sass less stylus
        原理是一样的 语法上有区别
        sass是什么？
        他是CSS的预编译工具
        什么是预编译？
        文件后缀 名称.scss 需要转换成对应.css才能被识别
        为什么要学习SASS？
        它是属于工程化，可以提升我们开发效率，达到敏捷开发的效果
        写的比css更方便 提升我们的工具效率
        怎么做？
            怎么安装？
                1.先对系统进行全局安装
                2.针对vsconde安装对应的插件
                    sass
                    easy sass
                    配置相关信息 (百度)
                个人思考 百度 掘金 知乎 
                setting 配置对应的内容即可
                配置编译出来CSS格式
                {
            "format": "expanded",
            "extension": ".css"
            },
            配置输出的目录
            ],
            "easysass.targetDir": "./css",
            scss免编译 用正则
            如果文件中出现_ 下换线的文件 sascc不会编译成CSS
            "easysass.excludeRegex": "_",
            基础语法
                七大基础
                嵌套
                    可以以嵌套的形式编写CSS，让样式更加清晰明了
                    &(and的) 表示同级的类名 
                    通常结合伪类和伪元素一起使用
                变量
                    step1.在SCSS文件顶端设置 $名称 属性值
                    setp2 在对应属性值中调用 $名称
                函数
                    step1 在CSS文件顶端
                    @function 函数名（变量）{
                        @reitrn：结果;
                    }
                    eg
                    @function double($w) {
                        @return:$w*2;
                    }
                    step2 在属性中调用函数
                    eg
                    width:
                    
                混淆 
                    提取公因式(公有的样式写在一起)
                    @mixin 名称{公有的样式};
                    @include 名称(); 复制公有样式

                
                继承
                    提取公因式
                    .类名公有样式
                    @extend 类名
                用@mixin 可以设置宽高的图片的子元素 水平垂直居中
                @   设置背景图水平垂直居中
                
    -->
    <div class="box">
        <div class="son"></div>
    </div>
    <div class="bos">
        <div class="demo"></div>
    </div>
    <div class="bosa">
        <div class="demo"></div>
    </div>
    <div class="success"></div>
    <div class="warning"></div>
    <div class="crear"></div>
</body>

</html>